$(document).ready(function() {
    myAjaxRules = new MyAjaxRules();
});

window.addEventListener('change', add, false);

function add() {
    var cat = document.getElementById("categorias");
    var idCat = (cat.options[cat.selectedIndex].value);
    //Todo lo anterior en jQuery se hace asi: alert($('#categorias').val());
    //alert(opcion.options[opcion.selectedIndex].value);

    buscarSubcategoria(idCat);

}

function buscarSubcategoria(idCat) {
    var divCat = document.getElementById("subCategorias");

    var categoria = listaCat.getCategoria(idCat);
    if (categoria.subcategorias.length == 0) {
       cargarSubcategoriasSiNoCargadas(idCat);
    } 
    
    if (categoria.subcategorias.length > 0){
        
        html = '<label for="sub" >Subcategoria de ' + categoria.nombreCategoria + ': </label>';
        html += '<select id="sub" name="sub">';
        html += '<option>Elige</option>';
        for (var i = 0; i < categoria.subcategorias.length; i++) {
            var subcategoria = categoria.subcategorias[i];
            html += '<option> ';
            html += subcategoria.nombreSubcategoria;
            html += '</option>';
        }
        html += '</select>';
        
        divCat.innerHTML = html;
        addInfo(idCat);
    }

    
    
}

function addInfo(idCat) {
    var opcionSub = document.getElementById("sub"); //obtengo la select
    
    var contenidoSub = (opcionSub.options[opcionSub.selectedIndex].value);
    alert (contenidoSub)
    alert(opcionSub.options[opcionSub.selectedIndex].text);
    opcionSub.onchange = getfocus(opcionSub);
    //alert(contenidoSub);
    //obtengo el valor elegido en la select

    var div = document.getElementById("datos");
    html = "<br><p><b>Introducir: </b></p>";
    html += "<table> <tr> <td>Título:</td> <td><input type='text' size='30' name='titulo'> </td> </tr>  ";

    if (idCat == 1) {
        html += "<tr> <td> Director: </td> <td> <input type='text' size='30' name='director'> </td> </tr>"
         + "<tr> <td> Actores: </td> <td> <input type='text' size='30' name='actores'> </td> </tr>"
         + "<tr> <td> Año: </td> <td> <input type='text' size='30' name='año'> </td> </tr>"
         + "<tr> <td> Duración: </td> <td> <input type='text' size='30' name='duracion'> </td> </tr>"
         + "<tr> <td> En colección: </td> <td> <input type='radio' name='coleccion' value='si'>Si <input type='radio' name='coleccion' value='no'>No </td> </tr>"
         + "<tr> <td> Vista: </td> <td> <input type='radio' name='vista' value='si'>Sí <input type='radio' name='vista' value='no' >No </td> </tr>"
         + "<tr> <td> Descripción: </td> <td><textarea rows='3' cols='40'></textarea></td></tr> </table>"
         + "<input type='image' name='imageField' id='enviar' src='../image/accept3.png' />";

        div.innerHTML = html;
    }

    if (idCat == 2) {
        html = "<tr> <td> Vista: </td> <td> <input type='radio' name='vista' value='si'>Sí <input type='radio' name='vista' value='no' >No </td> </tr>";
        div.innerHTML = html;
    }
    
    
    /*var div = document.getElementById("datos");
     html = "<br><p><b>Introducir: </b></p>";
     html += "<table> <tr> <td>Título:</td> <td><input type='text' size='30' name='título'> </td> </tr>  ";
     html += "<tr> <td> Autor: </td> <td> <input type='text' size='30' name='título'> </td> </tr>";
     html += "<tr> <td> Descripción: </td> <td><textarea rows='3' cols='40'></textarea></td></tr> </table>";
     html += "<input type='image' name='imageField' id='enviar' src='../image/accept3.png' />";

     div.innerHTML = html;
     */
}

function getfocus(opcionSub)
{
opcionSub.options[opcionSub.selectedIndex].text.focus();
}


function cargarSubcategoriasSiNoCargadas(idCat) {
    var objeto = {
        idCategoria : idCat,
        idFuncion : 2
    }

    myAjaxRules.ejecutarAJAX({
        method : "GET",
        url : "../php/getSubcategoria.php",
        funcionRespuesta : llenarObjeto,
        JSObject : objeto,
        datosCallback : objeto,
        palabraBloqueo : "cat",
        //selectorThis : event.target,
        //descripcion: "Recuperar artículos de la categoría '" + nombre + "'",
        autoCierreAlertas : false,
        ajaxTimeout : 7000,
    });
}

